import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { loaderDefaultProps } from './defaultProps';
import type { LoaderOptions } from './type';

export interface LoaderProps extends LoaderOptions, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {}

const Loader: FC<LoaderProps> = (props) => {
  const {
    className,
    active,
    disabled,
    centered,
    speed,
    inline,
    text,
    indeterminate,
    color,
    size,
    inverted,
    shape,
    children,
    forwardedRef,
    ...loaderProps
  } = props;

  return createElement(
    'div',
    {
      ref: forwardedRef,
      className: classNames(
        'ui',
        { active, disabled, centered, inline, text, indeterminate, inverted },
        speed,
        color,
        size,
        shape,
        'loader',
        className,
      ),
      ...loaderProps,
    },
    children || text,
  );
};

Loader.displayName = 'Loader';
Loader.defaultProps = loaderDefaultProps;

export default Loader;
